<!--
 * @Date: 2023-08-04 10:35:46
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-08-28 15:32:32
 * @FilePath: \part-cloud-appd:\project\company\veteran-cadre-app\src\components\home\xxtz-pop.vue
-->
<script setup lang="ts">
const emit = defineEmits(['onOpen', 'onClose'])
const popupRef = ref(null)

const id = 'P5mkDaHDVMEVSpG6PH7vgfv7IdlsXHQNL3zEgYlTOGk'
onLoad(() => {
  uni.getSetting({
    withSubscriptions: true,
    success(res) {
      if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
        if (
          res.subscriptionsSetting.itemSettings
          && res.subscriptionsSetting.itemSettings[id]
          && res.subscriptionsSetting.itemSettings[id] === 'accept'
        )
          console.log('以获取权限')

        else
          open()

        // else onOpen()
      }
    },
  })
})

function onOPen() {
  uni.requestSubscribeMessage({
    tmplIds: [id],
    success(res) {
      popupRef.value?.close()
      // that.triggerEvent('setOpen')
    },
    fail(err) {
      console.error(err)
    },
  })
}

function open() {
  popupRef.value.open('center')
  emit('onOpen')
}
function close() {
  popupRef.value.close()
  emit('onClose')
}
defineExpose({
  open,
  close,
})
</script>

<template>
  <uni-popup ref="popupRef" background-color="transparent">
    <view class="popup-content">
      <div class="relative h-488rpx w-562rpx">
        <image
          class="block h-488rpx w-562rpx"
          src="../../static/images/home/xxtz-pop.png"
          mode="scaleToFill"
        />

        <div
          class="mx-a text-36rpx font-bold text-center text-#333333 absolute left-0 right-0 top-144rpx"
        >
          及时获取消息通知
        </div>
        <div
          class="mx-a text-28rpx text-center absolute w-448rpx left-0 right-0 top-222rpx"
          style="letter-spacing: 0em; font-family: PingFang SC"
        >
          <span class="text-#666666"> 开启消息通知，快速获取 </span>
          <span class="text-#4FAE98">群体互助、 助老服务、周边福利等</span>
          <span class="text-#666666"> 信息</span>
        </div>
        <button class="button" open-type="subscribe" @click="onOPen">
          去开启通知
        </button>
      </div>
      <image
        class="mx-a mt-60rpx block h-48rpx w-48rpx"
        src="../../static/images/home/close-icon.png"
        mode="scaleToFill"
        @click="close"
      />
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.popup-content {
  background-color: transparent;
}
.button {
  position: absolute;
  bottom: 48rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 352rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 60rpx;
  font-size: 28rpx;
  letter-spacing: 0.1em;
  color: white;
  background: linear-gradient(283deg, #9DF4E0 0%, #4FAE98 99%);
}
.close-button {
  width: 14rpx;
  height: 14rpx;
  margin-top: 64rpx;
  line-height: 14rpx;
  border-radius: 50%;
  background: transparent;
  border: 2rpx solid white;
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
}
</style>
